<template>
  <div class="app-container">
    <div class="header">
      左侧为数字工具，右侧为模板自动化计算
    </div>
    <div class="tools-main">
      <div class="left">
        <div ref="template">

          <div style="display:none ">


            <p id="w-e-element-57"><span id="w-e-text-34" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span>&#xFEFF;<br></span></span></span></p>
            <p id="w-e-element-58"><span id="w-e-text-59" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span data-slate-string="true" style="font-family: 微软雅黑;">     本月有哪些民生问题备受市民关注？哪些部门工作成果受到群众表扬？哪些市州回复留言最积极？“群众呼声”制作的四川10月网上群众工作大数据报告已出炉！</span></span></span>
            </p>
            <p id="w-e-element-60"><span id="w-e-text-61" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span data-slate-string="true" style="font-family: 微软雅黑;">
 2023年10月收到网络问政类留言5610件，办结留言4551件，其中按时办结率98.69%，满意率96.78%。


</span></span></span></p>
            <p id="w-e-element-62"><span id="w-e-text-63" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span data-slate-string="true" style="font-family: 微软雅黑;"> 注：收件量=当月新增群众诉求数量；办结量=在当月办结的诉求数量；按时办结量=在留言办理时效内按期办结的诉求数量。


</span></span></span><span id="w-e-text-39" data-slate-node="text"><span data-slate-leaf="true"><strong
              class="token bold" style="font-family: 微软雅黑;"
            ><span data-slate-string="true"> &gt;&gt;关注：“文明养犬”成全省热议话题


</span></strong></span></span><span id="w-e-text-64" data-slate-node="text"><span data-slate-leaf="true"><span
              data-slate-string="true" style="font-family: 微软雅黑;"
            > 据大数据统计，“群众呼声”四川省网上群众工作平台收到的5610件留言中，投诉类留言2901条、求助类留言1544条、建议类留言641条、咨询类留言524条。

 留言主要涉及住房与城乡建设、交通、环保、三农、政务等领域，占留言总量的75%。住房与城乡建设类主要涉及房地产开发、物业管理、市政道路及设施；交通类主要涉及公路建设维修、占道停车、公交车管理；环境保护主要涉及娱乐场所饭店超市噪音、城乡环境治理；三农类主要涉及农村征地拆迁、村屯道路建设维修、土地承包问题；政务类主要涉及社区工作者、业主委员会、社会福利等问题。

 本月网民留言中，“文明养犬”首次上榜留言关键词，成为全国人民讨论的重点话题。


</span></span></span></p>
            <p id="w-e-element-65"><span id="w-e-text-66" data-slate-node="text"><span
              data-slate-leaf="true"
            ><strong class="token bold" style="font-family: 微软雅黑;"><span data-slate-string="true">
  &gt;&gt;成果：巴中满意率大幅提升


</span></strong></span></span></p>
            <p id="w-e-element-67"><span id="w-e-text-68" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span data-slate-string="true" style="font-family: 微软雅黑;"> 本月收到留言5610件，办结留言4551件，按时办结留言4529件，按时办结率为98.69%。省直部门（单位）中公安厅、教育厅、省卫生健康委等14个部门（单位）按时办结率达100%。各市（州）中成都按时办结量最多，绵阳、雅安、广安等17市（州）按时办结率100%。成都、南充、广安、绵阳、德阳进入留言办结量榜单前五名。


</span></span></span></p>
            <p id="w-e-element-69"><span id="w-e-text-70" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span data-slate-string="true" style="font-family: 微软雅黑;">
 本月办结的4551件留言中，满意率为96.78%。本期留言办理满意率较高的省直部门（单位）分别是公安厅、教育厅、省卫生健康委等14个部门（单位），满意率为100%；绵阳、雅安、广安等13个市（州）满意率高于95%，其中绵阳、雅安为100%。


</span></span></span></p>
            <p id="w-e-element-71"><span id="w-e-text-72" data-slate-node="text"><span
              data-slate-leaf="true"
            ><span data-slate-string="true" style="font-family: 微软雅黑;"> 巴中满意率大幅提升，从88.73%提升至94.03%。

</span></span></span></p>
            <p id="w-e-element-56"><span id="w-e-text-93" data-slate-node="text"><span
              data-slate-leaf="true"
            ><strong class="token bold" style="font-family: 微软雅黑;"><span
            >&#xFEFF;<br></span></strong></span></span></p>


          </div>


        </div>
        <el-button @click="setValue">2</el-button>
      </div>
      <div class="right" style="position: relative;">
        <Toolbar
          style="border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <div class="edit-main">
          <Editor
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </div>
    </div>

  </div>
</template>
<style lang="less">
.app-container {
  overflow: hidden;
}

.header {
  font-size: 18px;
  color: #666;
  padding: 20px 0;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.tools-main {
  display: flex;
  height: 100%;

  .left {
    width: 30%;

    min-height: 700px;

  }

  .right {
    width: 70%;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid #ddd;
    //border-left: 1px solid #ddd;
    .edit-main {
      height: calc(100% - 160px);
      border-bottom: 1px solid #ddd;
      overflow-y: scroll;
      border-left: 1px solid #ddd;

      &::-webkit-scrollbar {
        width: 3px;
        height: 1px;
      }

      &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        //border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #aaa;
      }

      &::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        //border-radius: 10px;
        background: #fefefe;
      }
    }

  }
}
</style>
<script>
// import { getCount } from '@/api/wz'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      value: '1',
      editor: {},
      html: '',
      toolbarConfig: {
        excludeKeys: 'emotion,group-more-style,underline,italic,color,bgColor,fontSize,lineHeight,fontFamily,|,insertLink,codeBlock,fullScreen,undo,redo,group-video,group-indent,todo'
      },
      editorConfig: { placeholder: '请输入内容...', scroll: false },
      mode: 'default'
    }
  },

  created() {

  },
  methods: {
    async setValue() {
      await this.syncSetValue('value', '2233')
      this.syncModelText()
    },
    syncSetValue(a, v) {
      this[`${a}`] = v
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
      this.syncModelText()
    },
    syncModelText() {
      let Template = this.$refs.template.innerHTML
      console.log(Template)
      this.html = Template.replace('<div style="display: none;">', '')
      console.log(this.html)
    }
  }
}
</script>
